<template>
  <header>
    <form>
      <div class="inputBox">
        <label for="linkName">友链名称：</label>
        <el-input
          id="linkName"
          v-model="linkName"
          placeholder="请输入友链名称"
        />
      </div>
      <div class="inputBox">
        <label for="linkUrl">友链地址：</label>
        <el-input id="linkUrl" v-model="linkUrl" placeholder="http/https">
        </el-input>
      </div>
      <div class="btnBox">
        <el-button @click="addLink">添加友链</el-button>
      </div>
    </form>
  </header>
  <main>
    <div class="linksBox" v-for="item in linkList" :key="item.id">
      <span
        class="iconfont icon-shanchu deleteIcon"
        @click="daloginShowBox(item.id)"
      ></span>
      <a :href="item.backlinks"></a>
      <img :src="item.linksImg" alt="" />
      <span>{{ item.backlinksName }}</span>
    </div>
  </main>

  <el-dialog
    v-model="dialogVisible"
    :modal="false"
    :close-on-click-modal="false"
    :show-close="false"
    title="温馨提示"
    width="30%"
  >
    <span>你确定要删除这个友链嘛？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteLink">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import { addLinks, selectLinkAll, deleteLinks } from "@/api/serverRequest";
export default defineComponent({
  name: "",
  props: {},
  components: {},
  setup() {
    let linkName = ref("");
    let linkUrl = ref("");
    let linkList = reactive([
      { id: "", backlinks: "", backlinksName: "", linksImg: "" },
    ]);
    let dialogVisible = ref(false);
    let deleteId = ref("0");

    function addLink() {
      if (
        !(
          linkUrl.value.indexOf("http://") === -1 ||
          linkUrl.value.indexOf("https://") === -1
        )
      ) {
        ElMessage.error("添加失败，请输入正确的url地址");
      } else {
        addLinks(
          linkName.value,
          linkUrl.value,
          `${linkUrl.value}/favicon.ico`
        ).then((response) => {
          if (response.data.status === 200) {
            linkList.push({
              id: linkList[linkList.length - 1].id + 1,
              backlinks: linkUrl.value,
              backlinksName: linkName.value,
              linksImg: `${linkUrl.value}/favicon.ico`,
            });
            ElMessage({
              message: "添加成功，恭喜您！！",
              type: "success",
            });
            linkName.value = "";
            linkUrl.value = "";
          }
        });
      }
    }

    selectLinkAll().then((response) => {
      linkList.push(...response.data);
      linkList.shift();
    });

    function deleteLink() {
      linkList.forEach((val, index) => {
        if (val.id === deleteId.value) {
          linkList.splice(index, 1);
        }
      });
      deleteLinks(deleteId.value);
      dialogVisible.value = false;
    }

    function daloginShowBox(id: string) {
      deleteId.value = id;
      dialogVisible.value = true;
    }

    return {
      linkName,
      linkUrl,
      addLink,
      linkList,
      dialogVisible,
      deleteLink,
      daloginShowBox,
    };
  },
});
</script>

<style scoped lang="scss">
header {
  width: 80vw;
  margin: 2rem auto;
  form {
    display: flex;
    .inputBox {
      label {
        width: 10rem;
        font-size: 14px;
        font-weight: bold;
        color: #61649f;
      }
      width: 25%;
      display: flex;
      align-items: center;
    }

    .btnBox {
      margin-left: 2rem;
    }
  }
}

main {
  width: 80%;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  .linksBox {
    position: relative;
    width: 10rem;
    height: 10rem;
    margin: 1.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 5px black;
    border-radius: 2px;
    img {
      height: 88%;
    }
    span {
      color: #61649f;
      font-size: 12px;
      font-weight: bold;
    }
    a {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .deleteIcon {
      position: absolute;
      color: #61649f;
      font-size: 20px;
      right: 10px;
      z-index: 10;
      cursor: pointer;
      &:hover {
        color: blue;
      }
    }
  }
}
</style>
